<html>

	<head>
		<title>基于bootstrap的loading</title>
		<meta charset="UTF-8" />
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	</head>

	<body>
		<h1>基于bootstrap的loading</h1>
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-md-offset-3 text-center">
					<p>
						<button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span><span class="ladda-spinner"></span></button>

						<button class="btn btn-primary ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span><span class="ladda-spinner"></span></button>

						<button class="btn btn-primary ladda-button" data-style="expand-up"><span class="ladda-label">expand-up</span><span class="ladda-spinner"></span></button>

						<button class="btn btn-primary ladda-button" data-style="expand-down"><span class="ladda-label">expand-down</span><span class="ladda-spinner"></span></button>
					</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 col-md-offset-3 text-center">
					<p>
						<button class="btn btn-info ladda-button" data-style="zoom-in"><span class="ladda-label">zoom-in</span><span class="ladda-spinner"></span></button>

						<button class="btn btn-info ladda-button" data-style="zoom-out"><span class="ladda-label">zoom-out</span><span class="ladda-spinner"></span></button>
					</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 col-md-offset-3 text-center">
					<p>
						<button class="btn btn-warning ladda-button" data-style="slide-left"><span class="ladda-label">slide-left</span><span class="ladda-spinner"></span></button>

						<button class="btn btn-warning ladda-button" data-style="slide-right"><span class="ladda-label">slide-right</span><span class="ladda-spinner"></span></button>

						<button class="btn btn-warning ladda-button" data-style="slide-up"><span class="ladda-label">slide-up</span><span class="ladda-spinner"></span></button>

						<button class="btn btn-warning ladda-button" data-style="slide-down"><span class="ladda-label">slide-down</span><span class="ladda-spinner"></span></button>
					</p>
					<p><button class="btn btn-warning ladda-button" data-style="contract"><span class="ladda-label">contract</span><span class="ladda-spinner"></span></button></p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 col-md-offset-3 text-center progress-demo">
					<p>Built-in progress bar</p>
					<p>
						<button class="btn btn-danger ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span><span class="ladda-spinner"></span><span class="ladda-spinner"></span></button>

						<button class="btn btn-danger ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span><span class="ladda-spinner"></span><span class="ladda-spinner"></span></button>

						<button class="btn btn-danger ladda-button" data-style="contract"><span class="ladda-label">contract</span><span class="ladda-spinner"></span><span class="ladda-spinner"></span></button>
					</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 col-md-offset-3 text-center">
					<p>Sizes</p>
					<p>
						<button class="btn btn-primary btn-xs ladda-button" data-style="expand-right" data-size="xs"><span class="ladda-label">extra small</span><span class="ladda-spinner"></span></button>

						<button class="btn btn-primary btn-sm ladda-button" data-style="expand-right" data-size="s"><span class="ladda-label">small</span><span class="ladda-spinner"></span></button>

						<button class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"><span class="ladda-label">large</span><span class="ladda-spinner"></span></button>
					</p>
				</div>
			</div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="js/spin.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/Ladda.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		

		// Bind normal buttons
		Ladda.bind( 'div:not(.progress-demo) button', { timeout: 2000 } );

		// Bind progress buttons and simulate loading progress
		Ladda.bind( '.progress-demo button', {
			callback: function( instance ) {
				var progress = 0;
				var interval = setInterval( function() {
					progress = Math.min( progress + Math.random() * 0.1, 1 );
					instance.setProgress( progress );

					if( progress === 1 ) {
						instance.stop();
						clearInterval( interval );
					}
				}, 200 );
			}
		} );

		// You can control loading explicitly using the JavaScript API
		// as outlined below:

		// var l = Ladda.create( document.querySelector( 'button' ) );
		// l.start();
		// l.stop();
		// l.toggle();
		// l.isLoading();
		// l.setProgress( 0-1 );

	
	</script>

</html>